<template>
  <div class="h-full bg-white">
    <van-nav-bar title="重置密码" left-arrow @click-left="$router.go(-1)" />
    <div class="p-h-10 b-t b-t-w-15">
      <van-field
        clearable
        class="m-t-10"
        type="number"
        placeholder="手机号"
        v-model.number="phone"
        :error-message="phoneErrorMessage"
      />
      <van-field clearable class="m-t-10" type="password" placeholder="新密码" v-model="password" />
      <van-field
        clearable
        class="m-t-10"
        type="password"
        placeholder="确认密码"
        v-model="repeatPassword"
        :error-message="this.errorMessage"
      ></van-field>
      <van-field v-model="sms" class="m-t-10" placeholder="短信验证码">
        <van-button
          :loading="isSend"
          loading-text="发送中..."
          slot="button"
          class="text-white bg-red b-r-20 b-none"
          size="small"
          :disabled="smsBtn.disabled"
          @click="handleSendMessage()"
        >{{countDown}}</van-button>
      </van-field>
      <van-button @click="handleSubmit()" class="w-full m-t-30 bg-red text-white b-none b-r-30">确认修改</van-button>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isSend: false,
      phone: 15638771882,
      password: '123',
      repeatPassword: '123',
      sms: '1234',
      smsBtn: {
        time: 60,
        disabled: false
      }
    }
  },
  methods: {
    async handleSubmit () {
      if (this.couldSubmit()) {
        // 0 表示重置成功
        // 2 表示有参数为空
        // 3 表示没有这个用户
        // 4 表示没有这个短信验证码
        // 5 表示验证码已过期
        // 6 表示验证失败
        // 7 表示该号码不是手机号
        let { status, message } = await this.$api.post('/resetPassword', {
          phone: this.phone,
          verifyCode: this.sms,
          password: this.password
        })
        if (status === 0) {
          this.$dialog.alert({
            message,
            confirmButtonText: '返回',
            confirmButtonColor: '#fd4f51'
          }).then(() => {
            this.$router.push('/user/setting')
          })
        } else {
          this.$toast.fail(message)
        }
      } else {
        this.$toast('请完善表单')
      }
    },
    couldSubmit () {
      return this.phone && this.password && this.repeatPassword && this.sms
    },
    async handleSendMessage () {
      if (this.couldSend()) {
        // 0 表示发送成功
        // 2 表示两条短信之间没有超过5分钟
        // 3 表示发送短信接口错误
        // 4 表示参数错误
        // 5 表示没有该用户
        this.isSend = true
        let { message, status } = await this.$api.post('/sendVerifCodeSms', {
          phone: this.phone
        })
        this.isSend = false
        if (status === 0) {
          this.smsBtn.disabled = true
          this.$toast.success(message)
          let timer = setInterval(() => {
            this.smsBtn.time--
            if (this.smsBtn.time === 0) {
              this.smsBtn.time = 60
              this.smsBtn.disabled = false
              clearInterval(timer)
            }
          }, 1000)
        } else {
          this.$toast.fail(message)
        }
      }
    },
    couldSend () {
      //  || !this.password || !this.repeatPassword || (this.password !== this.repeatPassword
      if (this.phoneErrorMessage) {
        this.$toast('请输入正确的手机号')
        return false
      } else {
        return true
      }
    }
  },
  computed: {
    countDown () {
      return this.smsBtn.disabled ? `${this.smsBtn.time}秒` : '发送验证码'
    },
    phoneErrorMessage () {
      if (this.phone) {
        return /^1[3456789]\d{9}$/.test(this.phone) ? '' : '手机号格式不正确'
      } else {
        return ''
      }
    },
    errorMessage () {
      return !this.repeatPassword || this.repeatPassword === this.password ? '' : '两次密码不一致'
    }
  }
}
</script>

<style lang="scss" scoped>
.b-r-30 {
  border-radius: 30px;
}
.b-t-w-15 {
  border-top-width: 15px;
}
</style>
